import { useBaseStore } from "@/store/base";
/**
 * 屏幕大小变化监听
 */
export const useResize = () => {
	// 屏幕断点
	const { breakPoint } = storeToRefs(useBaseStore());
	/**
	 * 屏幕大小变化  根据不同宽度 动态设置当前 断点
	 */
	const resize = (e: UIEvent) => {
		const width = (e.target as Window).innerWidth;
		switch (!!width) {
			case width < 768:
				breakPoint.value = "xs";
				break;
			case width >= 768 && width < 992:
				breakPoint.value = "sm";
				break;
			case width >= 992 && width < 1200:
				breakPoint.value = "md";
				break;
			case width >= 1200 && width < 1920:
				breakPoint.value = "lg";
				break;
			case width >= 1920:
				breakPoint.value = "xl";
				break;
		}
	};

	// 组件生命周期  监听屏幕大小变化
	onMounted(() => {
		resize({ target: { innerWidth: window.innerWidth } } as any);
		window.addEventListener("resize", resize);
	});
	onActivated(() => {
		resize({ target: { innerWidth: window.innerWidth } } as any);
		window.addEventListener("resize", resize);
	});
	onUnmounted(() => {
		window.removeEventListener("resize", resize);
	});
	onDeactivated(() => {
		window.removeEventListener("resize", resize);
	});
};
